<template>
	<view>
		<fa-navbar :title="`${pageTitle}二级分类`"></fa-navbar>
		<u-gap height="24" bg-color="#F6F8FB"></u-gap>
		<u-cell-group :border="false">
			<u-cell-item v-for="(item, idx) in subType" :key="idx" @click="toList(item)" :border-bottom="false">
				<u-image slot="icon" border-radius="8" width="144rpx" height="144rpx" src="/static/images/assets.svg"></u-image>
				<view slot="title" class="fa-cl-title pl-1 font24 flex-column">
					<h1 class="font32 u-line-1 col-main">{{ item.TypeText }}</h1>
					<view class="mt-m1 col-mark" style="line-height: 1.8;">
						<view>
							<text>账面数<text class="pl-m2 col-main">{{ item.Num }}</text></text>
							<text class="pl-3">实际数<text class="pl-m2 col-main">{{ item.RealNum }}</text></text>
						</view>
						<template v-if="item.IncreaseNum != 0 || item.LackNum != 0">
							<view>
								盘{{ item.IncreaseNum > 0 ? '盈' : '亏' }}数
								<text v-if="item.IncreaseNum > 0" class="pl-m2" style="color: #E55D5D;">+{{ item.IncreaseNum }}</text>
								<text v-else class="pl-m2" style="color: #31B027;">-{{ item.LackNum }}</text>
							</view>
						</template>
						<template v-else>
							<view class="col-white">0</view>
						</template>
					</view>
				</view>
			</u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	export default {
		components: {
			faNavbar
		},
		data() {
			return {
				taskID: '',
				subType: [],
				pageTitle: ''
			}
		},
		onLoad(option) {
			this.pageTitle = option.title;
			this.taskID = option.taskID;
			this.getSubType(option);
		},
		methods: {
			// 获取二级类型数据
			getSubType(data) {
				this.$api.getSubType({TaskGuid: data.taskID, TypeKey: data.type})
					.then(res => {
						if (res.code === 0) {
							this.subType = res.data;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
					.catch(err => console.error(err))
			},
			
			// 页面跳转
			toList(data) {
				uni.navigateTo({
					url: `./checkList?taskID=${this.taskID}&type=${data.Type}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.fa-cl-title {
		width: 500rpx;
	}
</style>
